<template>
  <div class="category-page">
    <!-- 面包屑导航 -->
    <el-row :gutter="20">
      <Breadcrumb 
        :items="breadcrumbItems" 
        type="modern" 
        :show-extra="false"
      />
    </el-row>

    <!-- 标题和描述区域 -->
    <HeaderSection 
      title="Templates and guides that will give your brand a boost"
      description="We created this set of guides and templates to help you build better brands. These documents can serve as useful guides for inspiration, some of them are working templates that can be adapted to create your own versions."
    />

    <!-- 瀑布流布局 -->
    <MasonryLayout 
      :items="allCards" 
      :loading="loading" 
      :noMore="noMore"
      @load-more="loadMore"
      :column-count="3"
    >
      <template #item="{ item }">
        <TemplateCard :item="item" />
      </template>
    </MasonryLayout>
  </div>
  
  <!-- 回到顶部按钮 -->
  <BacktopWithText />
</template>

<script setup>
import { ref, onMounted, markRaw } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import HeaderSection from '@/components/HeaderSection.vue';
import MasonryLayout from '@/components/MasonryLayout.vue';
import TemplateCard from '@/components/TemplateCard.vue';
import BacktopWithText from '@/components/BacktopWithText.vue';
import { House, Folder, CollectionTag } from '@element-plus/icons-vue';
import { commonLoadMore, getIconComponent } from '@/utils';
import { getCategories, getBreadcrumb } from '@/utils/api';
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id;

const loading = ref(false);
const noMore = ref(false);
const page = ref(1);

const allCards = ref([]);

// 加载更多数据
const loadMore = () => {
  commonLoadMore({
    dataList: allCards,
    page,
    loading,
    noMore,
    //dataGenerator是负责生成分页数据的工厂函数
    //当用户滚动触底时，系统会调用该函数生成新数据
    //若需要空数据状态，返回空数组dataGenerator: () => []
    dataGenerator: (pageNum, currentLength) => [...Array(8)].map((_, i) => ({
      title: `New Template ${pageNum * 3 + i + 1}`,
      link: '#',
      image: 'https://via.placeholder.com/600x400',
      rating: '★★★',
      description: 'dd'
    })),
    maxPage: 3,
    delay: 1000
  });
};


// 面包屑图标
const breadcrumbIcons = {
  'i-ep-house': House,
  'i-ep-folder': Folder,
  'i-ep-collection-tag': CollectionTag
}
const breadcrumbItems = ref([]);



const handleRefresh = () => {
  console.log('刷新数据')
}

onMounted(async () => {
  try {
    // 从API获取数据
    const res = await getCategories(id);
    allCards.value = res.data.data;
    // 从API获取面包屑数据
    const breadcrumbRes = await getBreadcrumb(id);
    breadcrumbItems.value = breadcrumbRes.data.data.map(item => ({
      ...item,
      icon: getIconComponent(breadcrumbIcons,item.icon) // 动态获取图标组件,覆盖icon属性
    }));
  } catch (error) {
    console.error('获取数据失败:', error);
  } 
})
</script>

<style scoped>
.category-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
  padding: 0 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-page {
    padding: 15px;
  }
}
</style>